<template>
  <div
    class="h-screen w-full overflow-auto"
    style="height: 280px; width: 320px"
  >
    <div class="flex h-full w-full p-2">
      <div class="flex h-full w-full flex-col gap-1">
        <div class="flex h-full w-full flex-auto flex-col gap-1">
          <div
            class="listTablebox flex h-full w-full flex-none flex-col overflow-hidden"
          >
            <el-card class="flex h-1/3 w-full flex-col">
              <div class="flex flex-row" style="font-size: 13px">
                <div class="w-1/2 text-left *:truncate">
                  <p>登陆账号：{{ userdb.name }}</p>
                  <p>登录类型：{{ userdb.ustype }}</p>
                </div>
                <div class="w-1/2 text-left *:truncate">
                  <p>数据-1</p>
                  <p>数据-2</p>
                </div>
              </div>
            </el-card>
            <el-card class="flex h-1/3 w-full flex-col">
              <div class="flex flex-row">
                <label
                  class="label hover:bg-slate-40 w-1/2 cursor-pointer rounded-lg border-2 border-slate-400 p-1 text-nowrap transition hover:text-gray-800"
                >
                  <input
                    type="file"
                    @change="handleFile"
                    class="hidden"
                    accept=".txt"
                  />
                  {{ txtsingt }}
                </label>
                <label
                  class="label hover:bg-slate-40 w-1/2 cursor-pointer rounded-lg border-2 border-slate-400 p-1 text-nowrap transition hover:text-gray-800"
                >
                  <button @click="emit('openbutt')" />
                  {{ msg }}
                </label>
              </div>
            </el-card>
            <el-card class="flex h-1/3 w-full flex-col">
              <div class="card-content">不知道这里放什么</div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { getinfoname, getinfotypes } from "@/utils/userinfolsage";
const emit = defineEmits(["openbutt"]);
const router = useRouter();
const txtsingt = ref<string>("选 择 T X T 谱");
const msg = ref<string>("选 择  内 置 谱");
const userdb = reactive({
  ustype: "1",
  name: "",
});
function handleFile(e: Event) {
  const target = e.target as HTMLInputElement;
  const file = target.files?.[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (evt) => {
      if (evt.target) {
        onFileContent(evt.target.result as string);
      }
    };
    reader.readAsText(file);
  }
}

function onFileContent(content: string) {
  try {
    // 直接传递原始文本内容
    router.push({
      path: "/music",
      query: { content },
    });
    msg.value = "选择 TXT 谱";
  } catch (e) {
    msg.value = "非合法 TXT 谱，重新选择";
  }
}
onMounted(() => {
  if (getinfotypes() == 1) {
    userdb.ustype = "管理员";
  } else {
    userdb.ustype = "普通用户";
  }
  if (getinfoname()) {
    userdb.name = getinfoname();
  }
});
</script>

<style scoped>
.card-header {
  font-weight: bold;
}

.card-content {
  padding: 10px;
}

/* 为每个卡片添加 5px 的外边距 */
.el-card {
  margin: 5px;
  background-color: transparent; /* 设置卡片背景为透明 */
  border: none; /* 如果需要也可以去掉边框 */
}
/* 为每个卡片添加 5px 的外边距 */
.label {
  margin: 5px;
}
</style>
